<template>
	<Wrapper>
		<image src="/static/images/login/login-password.png" class="prefix icon"/>
		<input_native
			@input="$emit('input', $event)"
			 placeholder="输入密码"
			:password="hide"/>
		<image :src="'/static/images/login/login-' + (hide ? 'open' : 'close') + '.png'" @tap="hide = !hide" class="suffix icon"/>
	</Wrapper>
</template>

<script>
	import Wrapper from '../wrapper/index.vue'
	import input_native from '../index.vue'
	
	export default {
		components: {
			Wrapper, input_native
		},
		props: {
			maxlength: {
				type: String,
				default: '50'
			}
		},
		data() {
			return {
				hide: true
			}
		}
	}
</script>

<style scoped>
	input_native {
		width: 100%;
	}
	.icon {
		width: 32upx;
		height: 32upx;
		margin-bottom: 5upx;
	}
	.prefix {
		margin-right: 5upx;
	}
	.suffix {
		margin: 0upx 10upx;
	}
</style>
